<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定制关联酒店</title>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
</head>
<body>
<table class="layui-table" lay-filter="travelguides" id="list" lay-size="sm" lay-even="" lay-skin="line">

</table>
</body>
<script type="text/html" id="barTravelguides">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="price">明细</a>
    <a class="layui-btn layui-btn-xs" lay-event="hotel">酒店</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="__PUBLIC__/layui/layui.2.5.6.all.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    layui.use(['layer','form','jquery'],function() {
        var layer = layui.layer,
            $ = layui.jquery,
            table = layui.table,
            form = layui.form;
        //第一个实例
        const TABLE_URL = '/api/trip/getExpediaHotel?trip_id=' + {$_GET['id']};
        var table_url = TABLE_URL;
        function renderTable(table_url){
            table.render({
                elem: '#list'
                // ,height: 'full-100'
                ,url: table_url //数据接口
                ,page: true //开启分页
                ,limit:15
                ,cellMinWidth:80
                ,cols: [[ //表头
                    {field: 'hotel_id', title: 'ID',width: 120,  sort: true, fixed: 'left'}
                    ,{field: 'hotel_name', title: '名称',
                        templet:function (d) {
                            return '<p class="showContent">'+d.hotel_name+'</p>';
                        }}
                    // ,{field: 'description', title: '描述',width: 200,
                    //     templet:function (d) {
                    //         return '<p class="showContent">'+d.description+'</p>';
                    //     }}
                    ,{field: 'check_in', title: '入住时间', width: 120}
                    ,{field: 'check_out', title: '退房时间', width: 120, sort: true}
                    ,{field: 'occupancy_title', title: '入住人数', width: 170, sort: true}
                    ,{field: 'create_time', title: '创建时间', width: 170, sort: true}
                    ,{field: 'total_price', title: '总价', width: 120}
                    ,{field: '', title: '操作', width: 180, toolbar: '#barTravelguides',fixed:'right'}
                ]]
            });
        }
        renderTable(table_url);
        $(document).on('mouseover','.showContent',function (data) {
            var text = $(this).html();
            var that = this;
            layer.tips('<p style="color:#999;">' + text + '</p>', that,{
                tips: [1,'#FFF'],
                time: 2000
            });
        })
        //监听工具条
        table.on('tool(travelguides)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除吗？', function(index){
                    $.post('/admin/quicktrip/removeExpeidaHotel',{id:data.id},function (res) {
                        layer.msg(res.msg);
                        layer.close(index);
                        if(res.code > 0){
                            obj.del();
                        }
                    },'json')
                });
            } else if(obj.event === 'price'){
                var hotel_json = JSON.parse(obj.data.hotel_json);
                var occupancyPricingData = hotel_json.occupancy_price;
                var computedPriceData = hotel_json.computed_price;
                var content = getShowPriceDetailsHtml(occupancyPricingData,computedPriceData,data.occupancy);
                layer.open({
                    type:1,
                    title:'查看详情',
                    area: ['60%','80%'],
                    content:'<div style="padding:16px;line-height: 36px;">' + content + '</div>',
                    shadeClose:true,
                    end:function (res) {

                    }
                })
            } else if(obj.event === 'hotel'){
                //组合筛选条件进行跳转
                var index = layer.load(2);
                var hotel_info = obj.data;
                var params = [];
                params.push('id='+hotel_info.trip_id);
                params.push('hid='+hotel_info.hotel_id);
                params.push('checkIn='+hotel_info.check_in);
                params.push('checkOut='+hotel_info.check_out);
                params.push('occupancy='+hotel_info.occupancy);
                params.push('roomAndPerson='+hotel_info.occupancy_title);
                window.location.href='/admin/hotel/tripmakehotelinfo?'+params.join('&');
            }
        });
        //获取价格的详情
        function getShowPriceDetailsHtml(occupancyPricingData,computedPriceData,occupancy)
        {
            var html ='<div class="layui-row" style="font-size:16px;">共' +computedPriceData.roomCount + '间房，'+computedPriceData.dayCount + '晚</div>';
            html +='<div class="layui-row" style="border-bottom:1px solid #ddd;font-size:14px;padding:0 8px;background: #dcdcdc">' + getShowRoomAndPersonHtml(occupancy) +
                '</div>';
            var roomNum = 0;
            $.each(occupancyPricingData,function (occupancy_k,occupancy_v) {
                html +='<div class="layui-row"><div class="layui-col-md8">第'+(++roomNum)+'间房</div><div class="layui-col-md4"></div></div>';
                html +='<div class="layui-row" style="padding:0 16px;">';
                $.each(occupancy_v.nightly,function (nightly_k,nightly_v) {
                    $.each(nightly_v,function (fee_k,fee_v) {
                        switch (fee_v.type) {
                            case 'tax_and_service_fee':
                                html +='<div class="layui-row"><div class="layui-col-md8">服务费+税费</div><div class="layui-col-md4">' + fee_v.value + ' '+ fee_v.currency + '</div></div>';break;
                            case 'base_rate':
                                html +='<div class="layui-row"><div class="layui-col-md8">基础费用</div><div class="layui-col-md4">' + fee_v.value + ' '+ fee_v.currency + '</div></div>';break;
                            default:
                                html +='<div class="layui-row"><div class="layui-col-md8">其他费用</div><div class="layui-col-md4">' + fee_v.value + ' '+ fee_v.currency + '</div></div>';break;
                                break;
                        }
                    })
                })
                html += '</div>';
            })
            html += '<div style="font-size: 14px;margin-top: 10px;border-top:1px solid #ddd">';
            html += '<div class="layui-row"><div class="layui-col-md8">房费(不含税)</div><div class="layui-col-md4">' + computedPriceData.totalBaseRate
                +' '+ computedPriceData.currency + '</div></div>';
            html += '<div class="layui-row"><div class="layui-col-md8">税费</div><div class="layui-col-md4">' + computedPriceData.totalTaxRate
                +' '+ computedPriceData.currency + '</div></div>';
            html += '<div class="layui-row" style="font-size: 20px;"><div class="layui-col-md8">总价格</div><div class="layui-col-md4">' + computedPriceData.totalPrice
                +' '+ computedPriceData.currency + '</div></div>';
            html += '</div>';
            return html;
        }

        function getShowRoomAndPersonHtml(occupancy)
        {
            var html = '';
            var occupancy = occupancy.split('|');
            if(occupancy.length < 1) return html;
            $.each(occupancy,function (i,v) {
                html += '第'+(i+1)+'间房：';
                var person = v.split('-');
                if(person.length > 1){
                    html += (person[0] || 0) +'个成人';
                    var childrenAges = person[1] || "";
                    if(childrenAges!=='' && childrenAges!==undefined){
                        var childrenAgesArr = childrenAges.split(',');
                        html += '，'+ (childrenAgesArr.length) +'个儿童【年龄分别为'+childrenAges+'岁】';
                    }
                }else{
                    html += (person[0] || 0) +'成人';
                }
                html += '<br>';
            })
            return html;
        }
    })
</script>
</html>